<template>
  <div v-loading="loading" class="">
    <div v-if="this.$route.query.source !== 'BF_PORTFOLIO'" v-loading="gatherLoading" class="list-table" style="margin-bottom: 20px; text-align: center;">
      <div class="area-header" style="margin-bottom: 15px; text-align: left;">
        <span class="area-header-title">{{ $t('投资汇总') }}</span>
      </div>
      <ul class="disting">
        <li style="background: linear-gradient(to right bottom, #FC6E7C 0%,#FFA185 100%);">
          <p>{{ $t('投资总认缴') }}{{ $t('金额单位') }}
            <el-tooltip :content="$t('投资总认缴=当前基金投资股权项目协议金额+当前基金投资的基金项目认缴金额')" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </p>
          <span v-if="InvestSummary.totalInvestmentSubscription">{{ moneyFormat(InvestSummary.totalInvestmentSubscription, 'w') }} </span>
          <span v-else>0</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #FC6E7C 0%,#FFA185 100%);">
          <p>{{ $t('投资总实缴') }}{{ $t('金额单位') }}
            <el-tooltip :content="$t('投资总实缴=当前基金投资股权项目划款金额+当前基金投资的基金项目实缴金额')" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </p>
          <span v-if="InvestSummary.totalPaidAmountInvestment">{{ moneyFormat(InvestSummary.totalPaidAmountInvestment, 'w') }} </span>
          <span v-else>0</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #44a4e0 0%,#57e6ff 100%);">
          <p>{{ $t('股权项目') }}
            <el-tooltip :content="$t('股权项目数量 = 当前基金投资的股权项目的总个数')" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </p>
          <span v-if="InvestSummary.bfInvestGroupNum">{{ moneyFormat(InvestSummary.bfInvestGroupNum) }}</span>
          <span v-else>0</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #A46CF1 0%,#D99CFB 100%);">
          <p>{{ $t('子基金项目') }}
            <el-tooltip :content="$t('子基金项目数量 = 当前基金投资的子基金项目的总个数')" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </p>
          <span v-if="InvestSummary.bfInvestFundNum">{{ moneyFormat(InvestSummary.bfInvestFundNum) }}</span>
          <span v-else>0</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #A46CF1 0%,#D99CFB 100%);">
          <p>{{ $t('累计回款总额') }}{{ $t('金额单位') }}
            <el-tooltip placement="top">
              <span slot="content">
                {{ $t('累计回款总额 = 当前基金投资项目累计回款总额') }}
              </span>
              <i class="el-icon-question" />
            </el-tooltip>
          </p>
          <span v-if="InvestSummary.recoveryAmountTotal">{{ moneyFormat(InvestSummary.recoveryAmountTotal, 'w') }}</span>
          <span v-else>0</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #3D9FFD 0%,#7AD6FF 100%);">
          <p>{{ $t('项目总估值') }}{{ $t('金额单位') }}
            <el-tooltip placement="top">
              <span slot="content">
                {{ $t('项目总估值 = 当前基金投资项目总估值') }}
              </span>
              <i class="el-icon-question" />
            </el-tooltip>
          </p>
          <span v-if="InvestSummary.totalProjectValuation">{{ moneyFormat(InvestSummary.totalProjectValuation, 'w') }}</span>
          <span v-else>0</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #3D9FFD 0%,#7AD6FF 100%);">
          <p>{{ $t('总估值倍数') }}</p>
          <span v-if="InvestSummary.totalPaidAmountInvestment === 0">
            <span>0</span>
          </span>
          <span v-else>{{ (InvestSummary.totalProjectValuation / InvestSummary.totalPaidAmountInvestment).toFixed(2) }}</span>
        </li>
      </ul>
    </div>
    <div class="list-table noPad">
      <el-tabs v-model="activeName" @tab-click="clickMenu">
        <el-tab-pane v-for="(item, key) in childMenuTabs" :key="key" :lazy="true" :label="$t(item.menuName)" :name="item.menuName" />
        <div v-loading="loading">
          <!--动态页面 ，根据is的值来确定渲染哪个组件 -->
          <component :is="menuPath" ref="menuPath" :parameter="parameter" />
        </div>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { childMenuList	} from '@/api/system/menu'
import { getAsyncComponent } from '@/utils'
import { getDealBase } from '@/api/base/deal/dealBase'
import { getInvestSummary } from '@/api/bf/investGroup/bfInvestGroup'

export default {
  data() {
    return {
      // 加载
      loading: true,
      gatherLoading: false,
      // 选中页签名称
      activeName: this.$t('股权项目'),
      // 项目ID
      gpId: this.$route.query.gpId,
      // 子页签
      childMenuTabs: [],
      // 组件地址
      menuPath: '',
      // 参数
      parameter: {},
      // 菜单标识
      menuIdent: 'bf_invest_group',
      InvestSummary: {
        totalInvestmentSubscription: undefined,
        totalPaidAmountInvestment: undefined,
        bfInvestGroupNum: undefined,
        bfInvestFundNum: undefined,
        recoveryAmountTotal: undefined,
        totalProjectValuation: undefined,
        underProjectNum: undefined,
        exitProject: undefined,
        mainIndustryPro: undefined,
        mainIndustryMoney: undefined
      }
    }
  },
  created() {
    this.listLoad()
  },
  mounted() {
    // 获取投资汇总值
    this.getInvestmentSummary()
  },
  methods: {
    /** 查询投资汇总数据 */
    getInvestmentSummary() {
      this.gatherLoading = true
      getInvestSummary({ 'dealId': this.$route.query.id }).then(response => {
        this.InvestSummary = response.data
        this.gatherLoading = false
      })
    },
    listLoad() {
      this.loading = true
      // 菜单列表
      childMenuList(this.menuIdent).then(response => {
        const childMenuTabs = response.rows
        getDealBase(this.$route.query.id).then(res => {
          if (res.data.bfBase.isReverseInvestment !== 'Y') {
              childMenuTabs.splice(2, 1)
          }
          this.childMenuTabs = childMenuTabs
          this.clickMenu(response.rows[0])
          this.loading = false
        })
      })
    },
    clickMenu(tab) {
      this.childMenuTabs && this.childMenuTabs.forEach(item => {
        if (item.menuName === tab.menuName || item.menuName === tab.name) {
          this.$nextTick(() => {
            this.$set(item, 'flag', true)
            this.importFormPath(item.component)
            this.listComponent()
          })
        } else {
          this.$set(item, 'flag', false)
        }
      })
    },
    listComponent() {
      this.$bus.$once('async_done', () => {
        this.load()
      })
    },
    async load() {
      this.loading = true
      if (!this.gpId) {
        await getDealBase(this.$route.query.id).then(res => {
          this.gpId = res.data.bfBase.manageCompany
        })
      }
      if (this.$refs.menuPath?.init !== undefined) {
        const data = {
          id: this.gpId
        }
        this.$refs.menuPath.init(data)
        this.$refs.menuPath.openLocation = 'Home'
      }
      this.loading = false
    },
    // 引入组件
    importFormPath(menuPath) {
      if (menuPath) {
        this.menuPath = getAsyncComponent('@/views/' + menuPath)
        console.log(this.menuPath)
      } else {
        const error = 'error/404'
        this.importFormPath(error)
      }
    }
  }
}
</script>
